
<template>
  <div class="discoverRoot">
    <div class="navBar">
      <div class="navItem" v-for=" (v,i) in   navBarData" :key="i" :class="{active: i === activeNum}">
        <span @click="handleNav(v.path,i)">{{v.name}}</span>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
  name: 'discover',
  setup() {
    const data = reactive({
      navBarData: [
        { name: '个性推荐', path: '/discover/recommend' },
        { name: '歌单', path: '/discover/musiclist' },
        { name: '排行榜', path: '/discover/ranking' },
        { name: '歌手', path: '/discover/singer' }
      ],
      activeNum: 0
    })
    const router = useRouter()
    const route = useRoute()
    const handleNav = (path, i) => {
      data.activeNum = i
      router.push(path)
    }
    onMounted(() => {
      const path = decodeURI(route.path)
      data.navBarData.forEach((v, i) => {
        if (path.indexOf(v.path) !== -1) {
          data.activeNum = i
        }
      })
    })
    return {
      ...toRefs(data),
      handleNav
    }
  }
}
</script>

<style scoped>
.discoverRoot {
  height: 100%;
  padding: 0 15px;
}
.navBar {
  padding: 10px 0 20px 20px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #333;
}
.navItem {
  margin-right: 15px;
  padding: 0px 2px;
  border-bottom: 2px solid transparent;
}
.active {
  margin-top: 3px;
  padding-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--red);
  border-bottom: 2px solid var(--red);
}
</style>